<template>
  <div class="applyWrap">
    <div class="applyItem" v-for="item in applyFriendList" :key="item.id">
      <div class="applyItemDiv" v-if="item.isMe">
        <Header class="applyHead" :src="item.base+item.myHeadImg"/>
        <div class="applyInfo">
          <span>{{item.myChatCode}}</span>
          <span>
            <button v-if="item.status==1" @click="optionApply(item, 2)">同意</button>
            <button v-if="item.status==1" @click="optionApply(item, 3)">拒绝</button>
            <label v-if="item.status!=1">{{statusText[item.status]}}</label>
          </span>
        </div>
      </div>
      <div class="applyItemDiv" v-if="!item.isMe">
        <Header class="applyHead" :src="item.base+item.friendHeadImg"/>
        <div class="applyInfo">
          <span>{{item.friendChatCode}}</span>
          <span>
            <label>{{statusText[item.status]}}</label>
          </span>
        </div>
      </div>
    </div>
    <div style="width: 182px; height: 0" v-for="i in 10" :key="i + new Date().getTime()"></div>
  </div>
</template>

<script type='text/ecmascript-6'>
import api from "@/api/index.js";
import Header from "../comp/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      applyFriendList: [],
      statusText: {
        1: '等待验证',
        2: '已添加',
        3: '已拒绝'
      }
    };
  },
  mounted() {
    this.friendApplyList();
  },
  methods: {
    friendApplyList() {
      const params = {
        userChatCode: JSON.parse(localStorage.userInfo).chatCode
      }
      api.friendApplyList(params).then((res) => {
        if (res.data.code == 0) {
          this.applyFriendList = res.data.data;
          if (this.applyFriendList.length > 0) {
            this.applyFriendList.forEach((element) => {
              if (element.friendChatCode == JSON.parse(localStorage.userInfo).chatCode) {
                this.$set(element, 'isMe', true);
                // element.isMe = true;
              }
            })
          }

          console.log(this.applyFriendList, 9999);
        }
      })
    },
    optionApply(item, status) {
      const params = {
        id: item.id,
        status: status
      }
      api.friendApplyUpdate(params).then((res) => {
        if (res.data.code == 0) {
          item.status = status;
          if (status == 2) {
            const data = [{
              chatCode: item.myChatCode,
              userChatCode: item.friendChatCode
            }, {
              chatCode: item.friendChatCode,
              userChatCode: item.myChatCode
            }]
            data.forEach((element) => {
              api.friendAdd(element).then((result) => {
                if (result.userChatCode == JSON.parse(localStorage.userInfo).chatCode) {
                  this.$store.commit('store_friendData', result);
                }
              })
            })
          }
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.applyWrap {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  align-content: flex-start;
  padding: 20px;
  .applyItem {
    margin: 10px;
    width: 140px;
    height: 43px;
    display: flex;
    padding: 10px;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 2px 2px 7px 1px #ddd;
    overflow: hidden;
    .applyItemDiv {
      display: flex;
      align-items: center;
      .applyHead {
        flex-shrink: 0;
      }
      .applyInfo {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        color: #666;
        overflow: hidden;
        > span {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          > button {
            font-size: 12px;
            background: #5ba73f;
            color: #fff;
            border: 1px solid #5ba73f;
            border-radius: 3px;
            cursor: pointer;
            &:hover {
              opacity: 0.8;
            }
            &:last-child {
              background: #bebebe;
              border: 1px solid #bebebe;
            }
          }
        }
      }
    }
  }
}
</style>